<template>
	<view>
		<navbar :isback="true" title="“有喜事•盼好事•避坏事”"></navbar>
		
		
		
		<u-loading-page icon-size="100rpx" :loading="loading" loading-text="驼乡生活信息超市"></u-loading-page>
		<view class="content" v-if="!loading">
			<!-- 视频框 -->
			<!-- <video id="video" :src="URL(configName.indexBanner)" controls autoplay></video> -->
			<!-- <u-swiper :list="list3" height="484rpx" radius='25rpx' circular autoplay interval='2000'></u-swiper> -->
			<swiper v-if="list3.length>0" :indicator-dots="false" class="video" circular interval='2000' :current="curr" @change="change">
				<swiper-item v-for="(item,index) in list3" :key="index">
					<image class="video" v-if="getItemType(item) === 'image'" :src="getSource(item)" mode="aspectFill"
						@tap="clickHandler(getItemType(item),index)"></image>
					<video @ended='ended(index)' class="video" v-if="getItemType(item) === 'video'"
						:id="`video-${index}`" :enable-progress-gesture="false" :src="getSource(item)" controls
						@tap="clickHandler(getItemType(item),index)" @fullscreenchange='fullscreenchange'></video>
				</swiper-item>
			</swiper>
			<!-- 链接 -->
			<view class="linkbox" v-if="indexHref">
				{{indexHref}}
			</view>
			<!-- 类别 -->
			<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap">
				<view class="lbitem" v-for="(item,index) in lblist" :key="index"
					:style="{width:index==lblist.length-1||index==lblist.length-2?'100%':''}" @click="to(item.url)">
					<image :src="'/static/xishi/'+item.bg+'.png'" class="lbitem__bg" mode=""></image>
					<view class="lbitem__title">
						{{item.name}}
					</view>
					<view class="lbitem__tip">
						{{item.tip}}
						<view class="lbitem__tip__line" :style="{background:item.lbg}">

						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="kf">
			<button class="u-reset-button" open-type="contact">
				<image src="/static/xishi/kf.png" class="kficon" mode=""></image>
			</button>
		</view>
		
		
		
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	import {
		BASE_URL
	} from '@/api/config';
	export default {
		data() {
			return {
				loading:true,
				list3: [],
				indexHref:'',
				curr: 0,
				lblist: [{
						name: '种棵树',
						tip: '种下千年胡杨',
						lbg: "#FFAC14",
						bg: 'zs',
						url: '/pages/xishi/zks'
					},
					{
						name: '弄首歌',
						tip: '作词.作曲.编曲.代唱',
						lbg: "#4A8EFD",
						bg: 'lsg',
						url: '/pages/xishi/lsg'
					},
					{
						name: '集百福',
						tip: '集齐一百个人福字',
						lbg: "#FA7894",
						bg: 'jbf',
						url: '/pages/xishi/jbf'
					},
					{
						name: '散百财',
						tip: '给一百个人散财',
						lbg: "#9682F3",
						bg: 'sbc',
						url: '/pages/xishi/sbc'
					},
					{
						name: '定摆件',
						tip: '定制专属摆件',
						lbg: "#4A8EFD",
						bg: 'dbj',
						url: '/pages/xishi/dbj'
					},
					{
						name: '制像章',
						tip: '定制专属像章',
						lbg: "#5bc64e",
						bg: 'zxz',
						url: '/pages/xishi/zxz'
					},
				]
			};
		},
		methods: {
			getItemType(item) {
				if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
				if (typeof item === 'object' && this.keyName) {
					if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
					if (item.type === 'image') return 'image'
					if (item.type === 'video') return 'video'
					return 'image'
				}
			},
			// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
			getSource(item) {
				// console.log(item)
				if (typeof item === 'string') return item
				if (typeof item === 'object' && this.keyName) return item[this.keyName]
				else uni.$u.error('请按格式传递列表参数')
				return ''
			},
			fullscreenchange(e) {
				this.isqp = e.detail.fullScreen
				// console.log(e.detail.fullScreen)
			},
			change(e) {
				// 当前的激活索引
				// console.log(e)
				clearTimeout(this.timmer)
				let _this = this
				const {
					current
				} = e.detail
				if (this.getItemType(this.list3[current]) == 'image') {
					this.timmer = setTimeout(() => {
						_this.curr++
						if (_this.curr >= _this.list3.length) {
							_this.curr = 0
						}
					}, 2000)
				}
				this.pauseVideo(this.swipercur)
				this.swipercur = current
				this.curr = current
				this.playVideo(this.swipercur)
			},
			pauseVideo(index) {
				const lastItem = this.getSource(this.list3[index])
				if (uni.$u.test.video(lastItem)) {
					// 当视频隐藏时，暂停播放
					const video = uni.createVideoContext(`video-${index}`, this)
					video.pause()
				}
			},
			playVideo(index) {
				// console.log(this.list3[0])
				const lastItem = this.getSource(this.list3[index])
				if (uni.$u.test.video(lastItem)) {
					// 当视频隐藏时，暂停播放
					const video = uni.createVideoContext(`video-${index}`, this)
					video.play()
				}else{
					let _this = this
					this.timmer = setTimeout(() => {
						_this.curr++
					}, 2000)
				}
			},
			ended(index){
				console.log(this.isqp)
				if(this.isqp){
					return
				}
				index++
				this.curr=index
				if(this.curr>=this.list3.length){
					this.curr=0
				}
				// console.log(this.curr)
				this.playVideo(this.curr)
			},
			prevent(item) {
				// console.log(item)
				this.item = item
			},
			clickHandler(type,index) {
				if(type=='image'){
					this.preview([this.list3[index]],0)
				}
			},
			getindex() {
				this.list3 = []
				home.getInitData({type:1}).then(res=>{
					if(res.data.code==1){
						this.loading=false
						let arr=[]
						arr=res.data.data.banner[0].images.split(',')
						arr.map(t => {
							this.list3.push(BASE_URL + t)
						})
						
						let _this = this
						if(this.list3.length>1){
							if (this.getItemType(this.list3[0]) == 'image') {
								this.timmer = setTimeout(() => {
									_this.curr++
								}, 2000)
							}else{
								this.playVideo(0)
							}
						}else{
							this.playVideo(0)
						}
						this.indexHref=res.data.data.intro.title
					}
				})
			},
		},
		onLoad() {
			this.getindex()
			
		},
	}
</script>

<style lang="scss">
	.content {
		padding: 30rpx;

		.linkbox {
			margin-top: 28rpx;
			// height: 96rpx;
			background: #F7F7F9;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #1E1E1E;
			margin-bottom: 49rpx;
			
			&__icon {
				width: 31rpx;
				height: 31rpx;
				margin-right: 14rpx;
			}
		}
	}

	.swiper {
		height: 450rpx;
	}

	.video {
		width: 690rpx;
		height: 484rpx;
		background: #1B64F9;
		border-radius: 25rpx;
	}

	.lbitem {
		width: 333rpx;
		height: 181rpx;
		position: relative;
		margin-bottom: 23rpx;

		&__bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		&__title {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 31rpx;
			color: #FFFFFF;
			line-height: 31rpx;
			padding: 30rpx 0 15rpx 28rpx;
			position: relative;
		}

		&__tip {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 20rpx;
			margin-left: 31rpx;
			position: relative;
			width: fit-content;
			z-index: 2;

			&__line {
				width: 100%;
				height: 9rpx;
				border-radius: 5rpx;
				position: absolute;
				bottom: -10rpx;
				left: 0;
				z-index: 1;
			}
		}
	}
	.kf{
		width: 136rpx;
		height: 136rpx;
		position: fixed;
		bottom: 115rpx;
		right: 24rpx;
		.kficon{
			width: 136rpx;
			height: 136rpx;
		}
	}
</style>